<template>
	<view class="application-item">
		<uni-section type="line" titleFontSize="16px" v-if="title" :title="title"></uni-section>
		<view class="application-item-content">
			<u-grid :border="false" @click="handleClick" col="3">
				<u-grid-item v-for="(item, index) in appList" :key="index" :name="item.path" @touchstart="touchstart" @touchend="touchend(item)">
					<view class="grid-item">
						<image :src="getImageSrc(item)" class="grid-img"></image>
						<view class="grid-text">{{ item.name }}</view>
						<up-badge
							v-if="mainStore.showTip && !item.tip && !['双重预防', '四员两长', '高危作业'].includes(item.name)"
							:absolute="true"
							:offset="[-10, 20]"
							:value="title === '快捷入口' ? '-' : '+'"
							@click.stop
						></up-badge>
						<view class="tip" v-if="mainStore.showTip && item.tip">已添加</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue';
import { useMainStore } from '@/store/index.js';
import _ from 'lodash';
// 卡片组件
const mainStore = useMainStore();
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	appList: {
		type: Array,
		default: () => []
	}
});
const handleClick = (item) => {
	if (touchE.value - touchT.value > 350) return;
	if (item) {
		if (item == '/pages/application/application') {
			uni.switchTab({
				url: item
			});
		} else {
			uni.navigateTo({
				url: item
			});
		}
	} else {
		uni.showModal({
			content: '页面开发中...'
		});
	}
};
const getImageSrc = ({ icon, suffix }) => {
	return `/static/img/work/${icon}.${suffix ? suffix : 'jpg'}`;
};
let touchT = ref(''),
	touchE = ref('');
const touchstart = () => {
	touchT.value = new Date().getTime();
};
const touchend = (item) => {
	touchE.value = new Date().getTime();
	if (['双重预防', '四员两长', '高危作业'].includes(item.name)) {
		return;
	}
	if (touchE.value - touchT.value > 350) {
		setTimeout(() => {
			mainStore.showTip = true;
		}, 300);
	}
	if (mainStore.showTip) {
		mainStore.overlay = true;
		fastFn(item);
	}
};
// 快捷入口
const fastFn = (item) => {
	let operName = '';
	if (props.title === '快捷入口') {
		mainStore.deleteFast(item);
		operName = '移除';
	} else {
		console.log(item);
		mainStore.getFast(_.cloneDeep(item));
		item.tip = true;
		operName = '添加';
	}
	uni.showToast({
		title: `${operName}成功`,
		icon: 'success'
	});
};
</script>
<style lang="scss" scoped>
.application-item {
	background: #fff;
	box-shadow: 0 0 5px 2px #2172fc;
	margin-bottom: 16rpx;
	padding: 20rpx;
	box-sizing: border-box;
	border-radius: 10px;
	width: 100%;

	.application-item-title {
		color: $title-color;
		box-sizing: border-box;
		font-size: 30rpx;
		font-weight: bold;
	}

	:deep(.uni-section-header) {
		padding: 0px !important;

		.uni-section-header__decoration.line {
			height: 16px;
		}

		.uni-section__content-title {
			color: #2172fc !important;
			font-weight: bold;
		}
	}

	.application-item-content {
		box-sizing: border-box;
		margin-top: 20rpx;
		margin-bottom: -14px;

		.grid-item {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 160rpx;
			width: 100%;

			// animation: overly 2s cubic-bezier(.1, .25, 1, .25) forwards;
			// animation-play-state: running;
			.grid-img {
				width: 80rpx;
				height: 80rpx;
			}

			.grid-text {
				flex: 1;
				// height: 30rpx;
				color: $text-color;
				font-size: 12px;
				text-align: center;
				width: 80%;
				margin-top: 12rpx;
			}
		}
	}
}

:deep(.u-badge) {
	position: relative;
	animation: badgeAni 2s cubic-bezier(0.1, 0.25, 1, 0.25) forwards;
	pointer-events: auto;
}

.tip {
	font-size: 12px;
	color: gainsboro;
	position: absolute;
	top: -10px;
	right: 0px;
}

@keyframes overly {
	from {
		transform: rotate(0deg);
	}

	4% {
		transform: rotate(5deg);
	}

	12.5% {
		transform: rotate(-5deg);
	}

	21% {
		transform: rotate(5deg);
	}

	29% {
		transform: rotate(-5deg);
	}

	37.5% {
		transform: rotate(5deg);
	}

	46% {
		transform: rotate(-5deg);
	}

	50%,
	to {
		transform: rotate(0deg);
	}
}

@keyframes badgeAni {
	0% {
		z-index: 100;
	}

	50% {
		z-index: 1000;
	}

	100% {
		z-index: 119999;
	}
}
</style>
